<template>
  <div class="tb">
    <mt-header fixed title="道路货物运输量专项调查" style="z-index: 999999;">
      <span slot="left" @click="goBack">
        <mt-button icon="back" slot="left">返回</mt-button>
      </span>
    </mt-header>
    <mt-field label="车牌号:" placeholder="请输入" type="text" :readonly=true v-model="vehicleNo"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly=true v-model="plateColorCode"></mt-field>
    <mt-field label="日期:" placeholder="请输入" type="text" v-model="fzdcbfd12019002"></mt-field>
    <mt-field label="趟次序号:" placeholder="请输入" type="number" v-model="fzdcbfd12019003"></mt-field>
    <mt-field label="趟次数(个):" placeholder="请输入" type="number" v-model="fzdcbfd12019004"></mt-field>

    <mt-field
      label="起点:"
      placeholder="请输入"
      type="text"
      v-model="startingPoint"
      @click.native.capture="showStart1"
    ></mt-field>
    <mt-field
      label="终点:"
      placeholder="请输入"
      type="text"
      v-model="endPoint"
      @click.native.capture="showStart2"
    ></mt-field>
    <mt-field
      label="货物种类:"
      placeholder="请输入"
      type="text"
      v-model="hwType"
      @click.native.capture="choseHwzl"
    ></mt-field>

    <mt-field label="单趟次运量(吨):" placeholder="请输入" type="number" v-model="fzdcbfd12019008"></mt-field>
    <mt-field label="单趟次货物周转量(吨公里):" placeholder="请输入" type="number" v-model="fzdcbfd12019009"></mt-field>
    <mt-field label="平均运距(公里):" placeholder="请输入" type="number" v-model="fzdcbfd12019010"></mt-field>
    <mt-field label="单趟次集装箱箱运量（TEU）:" placeholder="请输入" type="number" v-model="fzdcbfd12019011"></mt-field>
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>

    <!-- 起点选择器 -->
    <mt-popup
      v-model="popupVisible1"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slotss" @change="onValuesChange1" value-key="value" showToolbar>
        <mt-header title="选择省市区">
          <mt-button slot="left" class="cancle" @click="popupVisible1 = !popupVisible1">取消</mt-button>
          <mt-button slot="right" class="sure" @click="sure">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <!-- 终点选择器 -->
    <mt-popup
      v-model="popupVisible2"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slotss" @change="onValuesChange1" value-key="value" showToolbar>
        <mt-header title="选择省市区">
          <mt-button slot="left" class="cancle" @click="popupVisible2 = !popupVisible2">取消</mt-button>
          <mt-button slot="right" class="sure" @click="sure1">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <!-- 货物种类选择器 -->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>请选择货物种类</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      recid: "",
            yhmlk: "",
      companyType:'',// 企业类型
      vehicleNo:'',// 车牌号码
      plateColorCode:"",//车辆颜色
      fzdcbfd12019001: "",
      fzdcbfd12019002: "",
      fzdcbfd12019003: "",
      fzdcbfd12019004: "",
      fzdcbfd12019005: "",
      fzdcbfd12019006: "",
      fzdcbfd12019007: "",
      fzdcbfd12019008: "",
      fzdcbfd12019009: "",
      fzdcbfd12019010: "",
      fzdcbfd12019011: "",
      startingPoint: "",
      endPoint: "",
      hwType: "",
      iosProvincesName: "",
      iosCitysName: "",
      iosCountysName: "",

      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      result: "",
      provinceValue: "",
      cityValue: "",
      countyValue: "",
      countyCode: "",
      startInfo: "",
      endInfo: "",
      first: "",
      second: "",
      third: "",
      iosProvinces: "",
      iosCitys: "",
      iosCountys: "",

      slotss: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "left",
          defaultIndex: 0
        },
        {
          flex: 1,
          values: [],
          className: "slot2",
          textAlign: "center",
          defaultIndex: 0
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "right",
          defaultIndex: 0
        }
      ],
      popupVisible: false,
      popupVisible1: false,
      popupVisible2: false,
      currentTags: {},
      userInfo:{}
    };
  },
  watch: {
    fzdcbfd12019009(newVal) {
      this.fzdcbfd12019010 =
        parseFloat(newVal) / parseFloat(this.fzdcbfd12019008);
    },
    fzdcbfd12019010(newVal) {
      this.fzdcbfd12019009 = parseFloat(this.fzdcbfd12019008) * newVal;
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo')||{});
    this.vehicleNo=this.userInfo.vehicleNo;
    this.plateColorCode=this.userInfo.plateColorCode;
  },
  mounted() {
    this.getDate();
  },
  methods: {
    goBack() {
      //点击后退
      this.$router.go(-1);
    },
    getDate() {
      let data = {};
      data.companyType=this.userInfo.companyType
      data.recid = this.$route.query.recid;
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/sjAssit/selectFzdcbfd01ForSJ",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            if (result.data.status == "1000") {
                let fzdcbfd01 = result.data.data.Fzdcbfd01;
              (this.recid = fzdcbfd01.recid),
                (this.yhmlk = fzdcbfd01.yhmlk),
                (this.fzdcbfd12019001 = fzdcbfd01.fzdcbfd12019001),
                (this.fzdcbfd12019002 = fzdcbfd01.fzdcbfd12019002),
                (this.fzdcbfd12019003 = fzdcbfd01.fzdcbfd12019003),
                (this.fzdcbfd12019004 = fzdcbfd01.fzdcbfd12019004),
                (this.fzdcbfd12019005 = fzdcbfd01.fzdcbfd12019005),
                (this.fzdcbfd12019006 = fzdcbfd01.fzdcbfd12019006),
                (this.fzdcbfd12019007 = fzdcbfd01.fzdcbfd12019007),
                (this.fzdcbfd12019008 = fzdcbfd01.fzdcbfd12019008),
                (this.fzdcbfd12019009 = fzdcbfd01.fzdcbfd12019009),
                (this.fzdcbfd12019010 = fzdcbfd01.fzdcbfd12019010),
                (this.fzdcbfd12019011 = fzdcbfd01.fzdcbfd12019011),
                (this.floatorder = fzdcbfd01.floatorder),
                console.log(result);
              // 起点、终点、货物种类 编码转换名称
              this.getCityData();
              this.getHwzl();
            }else{
                Toast(result.data.msg)
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    },
    // 校验条件
    check() {
       if (this.fzdcbfd12019002 == "") {
        Toast("日期不能为空！");
      } else if (this.fzdcbfd12019003 == "") {
        Toast("趟次序号不能为空！");
      } else if (this.fzdcbfd12019004 == "") {
        Toast("趟次数不能为空！");
      } else if (this.fzdcbfd12019005 == "") {
        Toast("起点不能为空！");
      } else if (this.fzdcbfd12019006 == "") {
        Toast("终点不能为空！");
      } else if (this.fzdcbfd12019007 == "") {
        Toast("货物种类不能为空！");
      } else if (this.fzdcbfd12019008 == "") {
        Toast("单趟次运量不能为空！");
      } else if (this.fzdcbfd12019009 == "" && this.fzdcbfd12019010 == "") {
        Toast("单趟次货物周转量和平均运距至少有一项不能为空！");
      }
      //  else if (this.fzdcbfd12019008 > 100) {
      //   Toast("单趟次运量应小于等于100，请核实！");
      // }
      //  else if (this.fzdcbfd12019010 != "" && this.fzdcbfd12019010 > 3500) {
      //   Toast("单趟次平均运距应小于等于3500");
      // }
       else {
        this.commit();
      }
    },
    commit() {
      let data = {};
      data.companyType =this.userInfo.companyType
      let fzdcbfd01 = {};
      (fzdcbfd01.recid = this.$route.query.recid),
        (fzdcbfd01.yhmlk = this.userInfo.yhRecid),
        (fzdcbfd01.fzdcbfd12019001 = this.vehicleNo),
        (fzdcbfd01.fzdcbfd12019029 = this.plateColorCode),
        (fzdcbfd01.fzdcbfd12019002 = this.fzdcbfd12019002),
        (fzdcbfd01.fzdcbfd12019003 = this.fzdcbfd12019003),
        (fzdcbfd01.fzdcbfd12019004 = this.fzdcbfd12019004),
        (fzdcbfd01.fzdcbfd12019005 = this.fzdcbfd12019005),
        (fzdcbfd01.fzdcbfd12019006 = this.fzdcbfd12019006),
        (fzdcbfd01.fzdcbfd12019007 = this.fzdcbfd12019007),
        (fzdcbfd01.fzdcbfd12019008 = this.fzdcbfd12019008),
        (fzdcbfd01.fzdcbfd12019009 = this.fzdcbfd12019009),
        (fzdcbfd01.fzdcbfd12019010 = this.fzdcbfd12019010),
        (fzdcbfd01.fzdcbfd12019011 = this.fzdcbfd12019011),
        (fzdcbfd01.floatorder = this.floatorder),
        (data.fzdcbfd01 = fzdcbfd01),
        console.log('canshu-->>'+JSON.stringify(data))
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/sjAssit/modifyFzdcbfd01ForSJ",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
              if (result.data.status == "1000") {
                console.log("保存成功");
                console.log(result);
                this.goback();
              }else{
                  Toast(result.data.msg)
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    goback() {
      this.$router.go(-1);
    },

    // 选择货物种类
    choseHwzl() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          console.log("数据加载成功");
          this.slots[0].values = response.data.hwzl;
          // this.slots[0].values = response.body.carType;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      this.hwType = this.currentTags.name;
      this.fzdcbfd12019007 = this.currentTags.code;
      this.popupVisible = false;
    },

    showStart1() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");

          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;

          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;

          this.popupVisible1 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    showStart2() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");

          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;

          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;

          this.popupVisible2 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },

    // 起点  确定按钮
    sure() {
      var show = false;
      var result = this.result;
      var province = this.provinceValue;
      var city = this.cityValue;
      var county = this.countyValue;

      this.startingPoint = province + "-" + city + "-" + county;
      this.fzdcbfd12019005 = this.countyCode;
      this.popupVisible1 = false;
      console.log(
        show,
        result,
        province,
        city,
        county,
        "---" + this.fzdcbfd12019005
      );
    },
    // 终点  确定按钮
    sure1() {
      var show = false;
      var result = this.result;
      var province = this.provinceValue;
      var city = this.cityValue;
      var county = this.countyValue;

      this.endPoint = province + "-" + city + "-" + county;
      this.fzdcbfd12019006 = this.countyCode;
      this.popupVisible2 = false;
      console.log(
        show,
        result,
        province,
        city,
        county,
        "---" + this.fzdcbfd12019006
      );
    },

    // 筛选器值变化时调用
    onValuesChange1(picker, values) {
      var cityArray = [],
        countyArray = [];
      if (values[0]) {
        for (let i = 0; i < this.iosCitys.length; i++) {
          if (values[0].id == this.iosCitys[i].parentId) {
            cityArray.push(this.iosCitys[i]);
          }
        }
        picker.setSlotValues(1, cityArray);
      }

      if (values[1]) {
        for (let j = 0; j < this.iosCountys.length; j++) {
          if (values[1].id == this.iosCountys[j].parentId) {
            countyArray.push(this.iosCountys[j]);
          }
        }
        picker.setSlotValues(2, countyArray);
      }
      var result = this.result;

      if (typeof values[1] == "object" && typeof values[2] == "object") {
        result = values[0].value + values[1].value + values[2].value;
        this.provinceValue = values[0].value;
        this.cityValue = values[1].value;
        this.countyValue = values[2].value;
        this.countyCode = values[2].id;

        for (let i = 0; i < this.iosProvinces.length; i++) {
          if (this.iosProvinces[i].value == this.province) {
            this.first = i;
          }
        }
        for (let i = 0; i < cityArray.length; i++) {
          if (this.city == cityArray[i].value) {
            this.second = i;
          }
        }
        for (var j = 0; j < countyArray.length; j++) {
          if (this.county == countyArray[j].value) {
            this.third = j;
          }
        }
        this.slotss[0].defaultIndex = parseInt(this.first);
        this.slotss[1].defaultIndex = parseInt(this.second);
      } else if (typeof values[1] != "object" && typeof values[2] == "object") {
        values[1] = this.iosCitys;
        result = values[0].value + this.city + values[2].value;
        this.provinceValue = values[0].value;
        this.cityValue = this.city;
        this.countyValue = values[2].value;
        this.countyCode = values[2].id;
      }
      this.result = result;
    },

    getCityData() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
          var provincesArray = [],
            cityArray = [],
            countyArray = [];
          let countyParentId = "",
            cityParentId = "";
          provincesArray = response.data.iosProvinces;
          cityArray = response.data.iosCitys;
          countyArray = response.data.iosCountys;

          for (let i = 0; i < countyArray.length; i++) {
            if (this.fzdcbfd12019005 == countyArray[i].id) {
              this.iosCountysName = countyArray[i].value;
              countyParentId = countyArray[i].parentId;
              console.log(
                "县:" + this.iosCountysName + "-县parentId：" + countyParentId
              );
            }
          }
          for (let j = 0; j < cityArray.length; j++) {
            if (countyParentId == cityArray[j].id) {
              this.iosCitysName = cityArray[j].value;
              cityParentId = cityArray[j].parentId;
              console.log(
                "市:" + this.iosCitysName + "-市parentId：" + cityParentId
              );
            }
          }
          for (let n = 0; n < provincesArray.length; n++) {
            if (cityParentId == provincesArray[n].id) {
              this.iosProvincesName = provincesArray[n].value;
              console.log("省:" + this.iosProvincesName);
            }
          }
          this.startingPoint =
            this.iosProvincesName +
            "-" +
            this.iosCitysName +
            "-" +
            this.iosCountysName;

          let endcount = "",
            endcity = "",
            endprov = "";
          for (let i = 0; i < countyArray.length; i++) {
            if (this.fzdcbfd12019006 == countyArray[i].id) {
              endcount = countyArray[i].value;
              countyParentId = countyArray[i].parentId;
              console.log("县:" + endcount + "-县parentId：" + countyParentId);
            }
          }
          for (let j = 0; j < cityArray.length; j++) {
            if (countyParentId == cityArray[j].id) {
              endcity = cityArray[j].value;
              cityParentId = cityArray[j].parentId;
              console.log("市:" + endcity + "-市parentId：" + cityParentId);
            }
          }
          for (let n = 0; n < provincesArray.length; n++) {
            if (cityParentId == provincesArray[n].id) {
              endprov = provincesArray[n].value;
              console.log("省:" + endprov);
            }
          }
          this.endPoint = endprov + "-" + endcity + "-" + endcount;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    getHwzl() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          let hwzlArray = response.data.hwzl;
          for (let i = 0; i < hwzlArray.length; i++) {
            if (this.fzdcbfd12019007 == hwzlArray[i].code) {
              this.hwType = hwzlArray[i].name;
            }
          }
        },
        response => {
          console.log("数据加载失败");
        }
      );
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>